<template>
      <div class="mui-content">
          <mt-swipe :auto="4000">
            <mt-swipe-item  v-for="item in swipeImage" :key="item.id">
              <img :src="item.path" alt="" srcset="">
            </mt-swipe-item>
          </mt-swipe>
          <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to = "/HEADER/NEWLIST">
                    <img src="../image/menu1.png" alt="" >
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to = "/HEADER/SHAREIMG">
                    <!-- <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> -->
                    <img src="../image/menu2.png" alt="" >
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to = "/HEADER/SHOPPING">
                    <img src="../image/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to = "/HEADER/COMMENT">
                    <img src="../image/menu4.png" alt="" >
                    <div class="mui-media-body">留言反馈</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to = "/HEADER/VIDEO">
                    <img src="../image/menu5.png" alt="" >
                    <div class="mui-media-body">视频专区</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to = "/HEADER/CONTACT">
                    <img src="../image/menu6.png" alt="">
                    <div class="mui-media-body">联系我们</div></router-link></li>
          </ul> 
        </div>
</template>

<script>
export default {
    data(){
        return {
            swipeImage:[]
        }
    },
    methods:{
        getSwipeImage(){
            this.$http.get("http://localhost:3000/swiptImage").then((result)=>{
                this.swipeImage = result.body;
            })
        }
    },
    created() {
    this.getSwipeImage();
  },
}
</script>

<style lang = 'less' scoped>
.mui-content{
    background-color: white;
    img{
        width: 100%;
        height: 100%;
    }
    .mint-swipe{
        height: 200px;
    }
    >ul{
        margin-top: 20px;
        background-color: white;
        border:none;
        >li{
            border:none !important;
            padding: 0!important;
            img{
                width: 60px;
            }
        }
    }
} 
</style>